<!-- 练习题 -->
<template>
	<el-main style="padding: 20px">
		<!-- 名称修改 -->
		<el-dialog :visible.sync="upname" width="40%">
			<el-form class="demo-ruleForm">
				<div class="block">
					<el-tag style="margin-right:8px">名称:</el-tag>
					<el-input style="margin-top:5%" v-model="form.name"></el-input>
				</div>
			</el-form>
			<el-button type="primary" style="margin-top:10%" size="mini" @click="upnameclick()"> 确认 </el-button>
		</el-dialog>
		<!--  -->
		<el-dialog :visible.sync="showtianjia" width="40%">
			<el-form class="demo-ruleForm">
				<div class="block">
					<el-tag style="margin-right:8px">选择分类:</el-tag>
					<el-cascader size="small" v-model="val2" :options="toplist" @change="handleChange"
						:props="listchange"></el-cascader>
				</div>
			</el-form>
			<el-form class="demo-ruleForm" style="margin-top:5%">
				<div class="block">
					<el-tag style="margin-right:8px">选择类目:</el-tag>
					<el-cascader size="small" v-model="val3" :options="leimu" @change="handleChangeleimu"
						:props="listchanges"></el-cascader>
				</div>
			</el-form>
			<el-button type="primary" style="margin-top:10%" size="mini" @click="addWord()"> 确认 </el-button>
		</el-dialog>

		<!-- 添加题库 -->
		<el-dialog :visible.sync="tikushow" width="40%">
			<el-form class="demo-ruleForm">
				<div class="block">
					<el-tag style="margin-right:8px">选择分类:</el-tag>
					<el-cascader size="small" v-model="val2" :options="toplist" @change="handleChange"
						:props="listchange"></el-cascader>
				</div>
			</el-form>
			<el-form class="demo-ruleForm" style="margin-top:5%">
				<div class="block">
					<el-tag style="margin-right:8px">选择类目:</el-tag>
					<el-cascader size="small" v-model="val3" :options="leimu" @change="handleChangeleimu"
						:props="listchanges"></el-cascader>
				</div>
			</el-form>
			<el-form class="demo-ruleForm" style="margin-top:5%">
				<div class="block">
					<el-tag style="margin-right:8px">自定义题库名称:</el-tag>
					<el-input v-model="titlename" style="margin-top:8px" placeholder="请输入自定义名称" size="small"></el-input>
				</div>
			</el-form>
			<el-form class="demo-ruleForm" style="margin-top:5%">
				<div class="block">
					<el-tag style="margin-right:8px">题库分类</el-tag>
					<el-switch v-model="statusvalue" active-value="2" inactive-value="1" active-text="每日一练题库" inactive-text="章节练习题库">
					</el-switch>

				</div>
			</el-form>

			<el-button type="primary" style="margin-top:10%" size="mini" @click="addTiKu()"> 确认 </el-button>
		</el-dialog>
		<div>

			<div class="toplists">
				<div>

				</div>
				<div>
					<el-button size="small" @click="fenlei" type="primary" style="margin:0 20px">选择分类</el-button>
					</el-button>
				</div>
				<div>
					<el-button size="small" @click="addtiku" type="primary">添加题库</el-button>
					</el-button>
					<el-button size="small" @click="delExam" type="danger">删除选中</el-button>
					</el-button>
				</div>
			</div>
		</div>

		<div class="table-box" v-if="dataExam.length==0?false:true">
			<el-table :data="dataExam" @selection-change="handleSelectionChange" style="width: 100%">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="name" label="题库名称" width="320"></el-table-column>
				<el-table-column v-if="dataExam.type == 1" prop="item" label="选项"></el-table-column>
				<el-table-column prop="className" label="分类" width="320"></el-table-column>
				<el-table-column prop="typeName" label="类目">
					<template slot-scope="scope">
						<el-tag @click="look(scope.row)">{{scope.row.typeName}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="statusCode" label="是否为每日一练题库">
					<template slot-scope="scope">
						<el-tag>{{scope.row.statusCode== 2 ? "是":"否"}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="setbianji(scope.row)" type="text" size="mini">编辑</el-button>
						<el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
						
					</template>
				</el-table-column>
			</el-table>

			<el-dialog :visible.sync="tianjia" width="80%">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="题目">
						<el-input v-model="form.content" placeholder="about"></el-input>
					</el-form-item>
					<el-form-item label="答案解析">
						<el-input type="textarea" v-model="form.analysis"></el-input>
					</el-form-item>
					<el-form-item label="答案">
						<el-input type="textarea" v-model="form.answer"></el-input>
					</el-form-item>
					<el-form-item label="选项">
						<el-input type="textarea" v-model="form.item" placeholder="非必填,判断题和选择题的多选项用 - 隔开"></el-input>
					</el-form-item>
					<el-form-item label="类型">
						<!-- <el-input type="textarea" v-model="form.type"></el-input> -->
						<el-radio-group v-model="setradio" style="margin-top: 20px">
							<el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">
								{{ item.categoryName }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">保存</el-button>
						<el-button @click="tianjia = false">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<el-pagination background layout="prev, pager, next" :page-count="data.pages" :current-page="current"
				@current-change="chaxun"></el-pagination>

		</div>
	</el-main>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				upname: false,
				titlename: '',
				tikushow: false,
				showtianjia: false,
				listchange: {
					label: "className",
					value: "classId",
				},
				listchanges: {
					label: "typeName",
					value: "typeId",
				},
				val3: '',
				setradio: "",
				radio: 1,
				toplist: [],
				select: [],
				form: {},
				fileList: [],
				page: 1,
				typeList: [],
				dataExam: [],
				leimu: [],
				current: 1,
				size: 20,
				classId: '',
				val2: '',
				tianjia: false,
				// url: 'https://api.shida123.cn/back/practicestores/importPractice'
				// url: 'https://api.shida123.cn/back/practicestores/importPractice'
				url: "http://localhost:8082/back/practicestores/importPractice",
				statusvalue:"",
				value2: true
			};
		},
		mounted: function() {
			// this.addWord();
			this.getFenlei();
			this.getType();
			this.getlists();
			// POST /back/practicestores/importPractice
		},
		// watch:{
		//   radio(){
		//     this.page = 1;
		//     this.addWord()
		//   }
		// },
		inject: ["reload"],
		methods: {
			// 查看
			look(msg) {
				console.log(msg)
				// 获取每日一练详情
				this.$router.push({
					path: "/Zhang/new?id=" + JSON.stringify(msg.typeId) + '&leimuid=' + msg.id
				});
			},
			// 获取所有
			getlists() {
				let params = {
					page: this.page,
					size: this.size
				};
				this.postRequest(`/back/shorehouse/queryShoreHouseList`, params).then((res) => {
					this.dataExam = res.data.data.list;

					console.log(this.dataExam)
					this.dataExam.forEach((item, i) => {
						if (Array.isArray(item.item)) {
							this.dataExam[i].item = item.item.join(" - ");
						}
						// isArray(item.item)
					});
					this.data = res.data.data;
					// console.log(res);
				});
			},
			//修改名称
			upnameclick() {
				let parmas = {
					classId: this.form.classId,
					id: this.form.id,
					name: this.form.name,
					typeId: this.form.typeId
				}
				this.postJson(
					"/back/shorehouse/editShoreHouse", parmas
				).then((res) => {
					this.$message({
						message: '修改成功',
						type: 'success'
					});
					this.getlists();

					this.upname = false
				});
			},
			addtiku() {
				this.tikushow = true
			},
			//上传
			uploadFile(param) {
				var fileObj = param.file;
				var form = new FormData(); //在创建FormData对象时指定表单的元素  我们需要传的参数
				form.append("file", param.file);
				form.append("typeId", this.val3[0]);
				this.uploadFileRequest('/back/practicestores/importPractice', form).then(res => {
					console.log(res)
					if (res.data.code == 10000) {
						this.$message({
							type: 'success',
							message: "上传成功"
						})
					}
				})
				//  axios({
				//    method: 'POST',
				//    url: this.url,
				//    headers: {
				//      'Content-Type': 'multipart/form-data'
				//    },
				//    data:form
				//  }).then(res => {
				//    console.log(res)
				//    if(res.data.code == 10000){
				//      this.$message({
				//        type:'success',
				//        message:"上传成功"
				//      })
				//    } 
				//  })
			},

			//獲取分类
			getFenlei() {
				this.postRequest(
					"/back/class/queryPracticeClassList?pageNo=" + this.currentPage + "&pageSize=20"
				).then((res) => {
					this.toplist = res.data.data;
				});
			},
			fenlei() {
				this.showtianjia = true
			},
			//选择结果
			handleChange(e) {
				console.log(e);
				this.classId = e[1];
				let obj = this.classId
				this.postJson(
					"/back/chaptertype/queryListByClassId",
					obj
				).then((res) => {

					this.leimu = res.data.data
				});
			},
			handleChangeleimu(e) {
				this.val3 = e
				console.log(this.val3)
			},
			getTypeExam() {},
			handleSelectionChange(e) {
				console.log(e);
				this.select = e;
			},
			delExam() {
				let arr = [];
				this.select.forEach((item) => {
					arr.push(item.id);
				});
				arr = arr.join(",");
				console.log(arr);
				this.postJson("/back/shorehouse/delete", arr).then(
					(res) => {
						console.log(res);
						this.reload();
						this.$message(res.data.msg);
					}
				);
			},
			deleteObj(e) {
				let parmas = e.id
				// this.postRequest("/back/practicestores/deletePractice?ids=" + e.practiceId).then(
				//   (res) => {
				//     console.log(res);
				//     this.reload();
				//     this.$message(res.data.msg);
				//   }
				// );
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.postJson("/back/shorehouse/delete", parmas).then(
						(res) => {
							console.log(res);
							this.reload();
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					);

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			addObj() {

			},
			open() {

			},
			setbianji(e) {
				console.log(e)
				this.upname = true;
				this.form = e;
				// this.setradio = this.form.type;
				// this.tianjia = true;
			},
			onSubmit() {
				console.log(this.form);
				if (this.form.item != null) {
					this.form.item = this.form.item.split("-");
				}
				// isArray(item.item)
				this.postJson(
					"/back/practicestores/updatePractice?id=" + this.form.practiceId,
					this.form
				).then((res) => {
					console.log(res);
					this.$message(res.data.msg);
				});
			},
			chaxun(val) {
				console.log(val);
				this.page = val;
				this.addWord();
			},
			getType() {
				this.postRequest('/comm/queryCategoryByType', {
					type: 'practice_type'
				}).then(res => {
					// console.log(res);
					this.typeList = res.data.data;
					this.radio = this.typeList[0].categoryCode;
				});
			},
			addTiKu() {
				this.tikushow = false
				let params = {
					typeId: this.val3[0],
					classId: this.classId,
					name: this.titlename,
					statusCode:this.statusvalue,
				};
				console.log(params)
				this.postJson(`/back/shorehouse/addShoreHouse`, params).then((res) => {
					let params = {
						page: this.page,
						size: this.size,
						classId: this.classId,
						typeId: this.val3[0]
					};
console.log(res)
					this.postRequest(`/back/shorehouse/queryShoreHouseList`, params).then((res) => {
						this.dataExam = res.data.data.list;
						this.dataExam.forEach((item, i) => {
							if (Array.isArray(item.item)) {
								this.dataExam[i].item = item.item.join(" - ");
							}
							// isArray(item.item)
						});
						this.data = res.data.data;
						console.log(res);
					});
				});

			},
			addWord() {
				this.showtianjia = false
				let params = {
					page: this.page,
					size: this.size,
					classId: this.classId,
					typeId: this.val3[0]
				};
				this.postRequest(`/back/shorehouse/queryShoreHouseList`, params).then((res) => {
					this.dataExam = res.data.data.list;
					this.dataExam.forEach((item, i) => {
						if (Array.isArray(item.item)) {
							this.dataExam[i].item = item.item.join(" - ");
						}
						// isArray(item.item)
					});
					this.data = res.data.data;
					console.log(res);
				});
				// let params = {
				//   page: this.page,
				//   size: this.size,
				//   type: this.radio,
				//   typeId:this.val3[0]
				// };
				// this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
				//   this.dataExam = res.data.data.list;
				//   this.dataExam.forEach((item, i) => {
				//     if (Array.isArray(item.item)) {
				//       this.dataExam[i].item = item.item.join(" - ");
				//     }
				//     // isArray(item.item)
				//   });
				//   this.data = res.data.data;
				//   console.log(res);
				// });
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`);
			},
		},
	};
</script>

<style>
	.topclass {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.liststop {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.toplists {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
